<template>
    <div>
    <Header></Header>

    <div class="zhong">
        <div class="block">
            <el-timeline>

                <el-timeline-item  placement="top" v-for="mainPost in mainPosts" :timestamp="mainPost.created">
                    <el-card>
                        <h4>
                            <router-link :to="{name: 'Posts', params: {id: mainPost.id}}">
                                {{mainPost.name}}
                            </router-link>
                        </h4>
                        <!--<p>{{mainPost.description}}</p>-->
                    </el-card>
                </el-timeline-item>
            </el-timeline>
        </div>
    </div>
        <div class="right" >
            <router-link :to="{name:''}">
                 <i class="el-icon-edit" @click="dialogFormVisible = true" ></i>
            </router-link>

        </div>



        <el-dialog title="发表新帖" :visible.sync="dialogFormVisible">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
                <el-form-item label="标题" prop="name" :label-width="formLabelWidth">
                    <el-input v-model="ruleForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="内容" prop="context" :label-width="formLabelWidth">
                    <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="请输入内容"
                            v-model="ruleForm.context">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
            </div>
        </el-dialog>
    </div>






</template>

<script>
    import Header from "../components/Header";
    export default {
        name: "MainPosts",
        components: {Header},
        data(){
            return{
                mainPosts:{},
                dialogTableVisible: false,
                dialogFormVisible: false,
                userid:'',
                formLabelWidth: '120px',
                ruleForm:{
                    name:'',
                    context:''
                },
                rules:{
                    name: [
                        { required: true, message: '请输入标题', trigger: 'blur' },
                    ],
                    context: [
                        { required: true, message: '请输入新帖的内容', trigger: 'blur' },
                    ]
                },
            }
        },
        mounted() {
            this.getMainposts()
        },
        methods:{
            getMainposts(){
                const zoneid = this.$route.params.id
                const _this=this;
                debugger
                this.$axios.get("/mainposts/"+zoneid).then(res=>{
                    debugger
                    console.log(res);
                    this.mainPosts=res.data.data
                })
            },
            submitForm(formName){
                debugger
                this.$refs[formName].validate((valid)=>{
                    debugger
                    if(valid) {
                        if (this.$store.getters.getUser.id) {
                            this.userid = this.$store.getters.getUser.id

                        var obj = {
                            userid: this.userid,
                            zoneid: this.$route.params.id,
                            name: this.ruleForm.name,
                        }

                        this.$axios.post('/mainposts/edit', obj, {
                            headers: {
                                "Authorization": localStorage.getItem("token")
                            }
                        }).then(res => {
                            var obj1 = {
                                userid: this.userid,
                                mainid: res.data.data,
                                content: this.ruleForm.context,
                                comments: 1,
                                reply: -1
                            }

                            this.$axios.post('/posts/edit', obj1, {
                                headers: {
                                    "Authorization": localStorage.getItem("token")
                                }
                            }).then(response => {
                                debugger
                                this.dialogFormVisible = false;
                                this.ruleForm.context = '';
                                this.ruleForm.name = '';
                                this.$message.success(response.data.data)
                                // this.getMainposts();
                                this.$router.push('/posts/' + res.data.data)

                            })
                        })
                        }else {
                            this.$message.error("请先进行登录")
                        }
                    }
                })
            }
        }
    }


</script>

<style scoped>

    .zhong{
        width: 70%;
        padding-left: 200px;
        float:left;
    }
    .right{
        float:left;
        padding-left: 50px;
        padding-top: 25px;


    }
    .el-icon-edit{
        height: 150%;
        width: 150%;
    }

</style>